<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* //动画 */
      @keyframes shake {
        0% {
          transform:translateX(0)
        }
        50% {
          transform: translateX(50px)
        }
        100% {
          trandform:translateX(0)
        }        
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        display: flex;
        /* 设置弹性盒子元素在主轴(横轴)方向上的对齐方式 */
        justify-content: center; 
        /* 设置flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式     */
        align-items: center;
        animation: shake 2s infinite alternate;
        /* animation-name:shake; */
        /* 持续时间 */
        /* animation-duration: 21s; */
        /* 运动变化曲线 */
        /* animation-timing-function: ease;
        /* 规定动画开始之前的延迟 */
        /* animation-delay: 0s; */
        /* 规定动画播放的次数 */
        /* infinite无限次数 | n具体次数 */
        /* animation-iteration-count:1; */
        /* 是否应该轮流反向播放动画 normal => 不是  alternate 是*/
        /* animation-direction: alternate; */ 
        
        /* 动画     名称 时间 */
      }

    </style>
  </head>
  <body>
    <div class="box">哈哈哈</div>
    <script>
      
    </script>

  </body>
</html>